<template>
  <div>
    <van-field
      :label="label"
      class="input_text_block"
      :required="isMust"
      :label-width="labelWidth"
    >
      <template #input>
        <div
          v-for="(item, index) in fileList"
          :key="index"
          class="wrapper space-between mb-5 file-list"
          style="text-align: left"
        >
          <a style="color: #00c1de" @click="_goEnclosure(item)">
            {{ item.AttName }}{{ item.AttExt }}</a
          >
          <van-icon
            v-if="edit"
            name="cross"
            color="red"
            @click="delFile(index)"
          />
        </div>
        <van-uploader
          v-if="edit"
          :max-count="2"
          @oversize="onOversize"
          :after-read="afterRead"
        >
          <van-button
            icon="photo-o"
            type="default"
            class="upload-btn"
            style="border-radius: 4px 0 0 4px"
            >上传照片</van-button
          >
        </van-uploader>
        <van-button
          v-if="edit"
          icon="idcard"
          type="default"
          class="upload-btn"
          @click="goFileList"
          style="border-radius: 0 4px 4px 0; margin-left: -1px"
          >附件库</van-button
        >
      </template>
    </van-field>
    <!-- 附件 -->
    <van-popup
      v-model="filePopup"
      closeable
      round
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="popup-title"></div>
      <div class="popup-content">
        <FileList @cbFile="_chooseFileList" />
      </div>
    </van-popup>
    <van-popup
      v-model="showPdf"
      closeable
      round
      position="bottom"
      :style="{ height: '100%' }"
    >
      <div class="popup-title">附件详情</div>
      <div class="popup-content">
        <PdfPreView :urlIn="pdfUrl" />
      </div>
    </van-popup>
    <van-overlay :show="showImg">
      <div class="imageShow" @click="showImg = false">
        <van-image width="100%" :src="imagePath" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
// 文件描述：   详情或编辑页使用选择文件上传的工具类
//创建人：田先生
//更改时间：
//更改人：高先生
import { uploadAttach } from "@/api/common";
import { getAttCode } from "@/api/common";
import FileList from "@/components/FileList/FileList.vue";
import PdfPreView from "@/components/Attach/PdfPreView";
export default {
  props: {
    labelWidth: {},
    labelName: {
      type: String,
      required: false,
    },
    attachs: {
       type: String,
      required: false,
    },
    fileLists: {
      //直接传入集合的方式
    },
    allowEdit: {
      type: Boolean,
      required: false,
      default: true,
    },

    mustInput: {},
    // IsPublic: {
    //   type: Boolean,
    //   required: false,
    // },
  },
  components: {
    FileList,
    PdfPreView,
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      fileList: [],
      filePopup: false,
      label: "附件",
      showPdf: false,
      pdfAttcode: "",
      pdfUrl: "",
      showImg: false,
      imagePath: "",
      edit: true,
      require: Boolean,
      isMust: false,
    };
  },
  created() {
    if (this.labelName) {
      this.label = this.labelName;
    }
    if (this.fileLists) {
      console.log("https======fileList=>", this.fileLists);
      this.fileList = this.fileLists;
    }

    if (this.mustInput) {
      this.isMust = this.mustInput;
    }
    this.edit = this.allowEdit;
    if (this.attachs) {
      this.fileList = JSON.parse(this.attachs);
    }
    console.log("https======this.attachs=>", this.attachs);
  },
  watch: {
    attachs: {
      handler(newName, oldName) {
        if (this.attachs && this.attachs.length > 0) {
          this.fileList = JSON.parse(this.attachs);
        } else {
          this.fileList = [];
        }
      },
    },

    allowEdit: {
      handler(newName, oldName) {
        this.allowEdit = newName;
        this.edit = this.allowEdit;
      },
    },
  },
  methods: {
    hiddenPdf() {
      this.showPdf = false;
    },
    onOversize(file) {
      Toast("文件大小不能超过 2M");
    },
    afterRead(file) {
      let params = new FormData(); //创建form对象
      params.append("file", file.file);
      uploadAttach(params)
        .then((res) => {
          this.fileList.push({
            AttCode: res.data.AttCode,
            AttExt: res.data.AttExt,
            AttName: res.data.AttName,
            AttFilePath: res.data.AttFilePath,
          });
          this.callBack();
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 附件详情
    _goEnclosure(item) {
      let params = { attCode: item.AttCode };
      getAttCode(params).then((res) => {
        var urlPath = res.data.AttMiddlePath;
        var sourcePath = res.data.AttFilePath;
        if (this.isPicture(sourcePath)) {
          if (sourcePath.indexOf("http") == -1) {
            console.log(this.baseUrl);
            this.imagePath = this.baseUrl + sourcePath;
          } else {
            this.imagePath = sourcePath;
          }
          this.showImg = true;
          console.log("img");
        } else if (urlPath) {
          {
            this.pdfUrl = urlPath;
            this.showPdf = true;
            console.log("pdf", this.pdfUrl);
          }
        }
      });
    },
    // 删除
    delFile(index) {
      this.fileList.splice(index, 1);
      this.callBack();
    },
    // 选择附件
    goFileList() {
      this.filePopup = true;
    },
    callBack() {
      var arry = [];
      this.fileList.forEach((item) => {
        arry.push({
          AttCode: item.AttCode,
          AttName: item.AttName,
          AttExt: item.AttExt,
        });
      });
      var attschs="";
      if (arry.length > 0) {
        attschs=JSON.stringify(arry);
      } 
        this.$emit("input",attschs);
        this.$emit("CallBack",attschs);
    },
    _chooseFileList(item) {
      if (item) {
        this.fileList.push({
          AttCode: item.AttCode,
          AttExt: item.AttExt,
          AttName: item.AttName,
        });
        this.callBack();
      }
      this.filePopup = false;
    },
    isPicture(str) {
      //判断是否是图片 - strFilter必须是小写列举
      var strFilter = ".jpeg|.gif|.jpg|.png|.bmp|.pic|.svg|";
      if (str.indexOf(".") > -1) {
        var p = str.lastIndexOf(".");
        var strPostfix = str.substring(p, this.length) + "|";
        strPostfix = strPostfix.toLowerCase();
        if (strFilter.indexOf(strPostfix) > -1) {
          return true;
        }
      }
      return false;
    },
  },
};
</script>

<style lang="less" scoped>
.imageShow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.file-list {
  position: relative;
  padding-right: 10px;
  .van-icon {
    position: absolute;
    right: 0px;
    top: 5px;
  }
}

.wrapper {
  display: flex;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}

.upload-btn {
  height: 30px;
}
</style>
